<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>组件化</title>
</head>
<body>
<h1> 组件化结构</h1>
<div id="app">

    <!-- 1.需求 编辑一首静夜思 但是要求代码尽可能复用.
            实现策略: 组件化思想
          2.组件化步骤:
            1.定义组件
                 全局组件: 任意的DIV都可以引入该组件
                 局部组件: 只有特定的DIV可以引入组件
            2. 编辑组件的key(注意驼峰规则的写法)
                 编辑组件体 特殊语法: 定义属性时 data(){return{ key:value}}
                 html标签: 使用template进行标记
            3.通过key对组件进行引用.
                      -->

    <!-- 组件复用 直接写上标签就可以显示模板中定义过的内容
 注意组件的标签名称 用驼峰规则对应组件名-->
    <!-- 复用必须在Vue元素内 -->
    <hello-com></hello-com>
    <hello-com></hello-com>

</div>

<!--
定义组件的模板html （就是一个模板）
注意事项
1.切记表示在Vue作用区域外
2.要求必须有根标签 如div span form (p标签不行 table标签不行)

-->
<template id="addNumTem">
    <div>
        <h3>静夜思</h3>
        床前明月光，疑是地上霜。
        举头望明月，低头思故乡。
        <!-- 复用的组件之间数据互不影响 -->
        {{num}}
        <button @click="addNum">点击</button>
    </div>

</template>

<!-- <script src="../js/axios.js"></script> -->
<!-- 引入js文件 -->
<script src="../js/vue.js"></script>
<script>
    Vue.component("helloCom", { //组件体
        data() {
            return {
                num: 0
            }
        },
        //对应html 可以直接写html内容
        template: `#addNumTem`,
        methods: {
            addNum() {
                this.num++
            }
        }
    })

    const APP = new Vue({
        //不要忘记# .等符号
        el: '#app',
        data: {},
        methods: {}
    })
</script>
</body>
</html>
